タグで、いろいろな線を引いてみましょう。




◆・・・　文字に線を引いてみませんか。・・・◆


　　　●上に線を引いてみます。
　　　　　
文字の上に線を引くと
こんな感じです。

<font style="border-top-style:dotted;border-color:9e99d9;line-height:40px;">


　　　●下に線を引いてみます。
　　　　　
文字の下に線を引くと
こんな感じでになります。

<font style="border-bottom-style:dotted;border-color:red;line-height:55px;">


　　　●くぼんだ感じの線を引いてみます。
　　　　　
くぼんだ感じの線を引くと
こんな感じになります。

<font style="border-bottom-style:groove;border-color:blue;line-height:40px;">


　　　●浮き上がった感じの線を引いてみます。
　　　　　
浮き上がった感じの線を引くと
こんな感じになります。

<font style="border-bottom-style:ridge;border-color:99ffab;line-height:35px;">


　　　●破線を引いてみます。
　　　　　
破線を引いた場合は、
こんな感じになります。

<font style="border-bottom-style:dashed;border-color:deeppink;line-height:35px;">


　　　●二重線を引いてみます。
　　　　　
二重線を引くと
こんな感じになります。

<font style="border-bottom-style:double;border-color:a400db;line-height:50px;">


　　　●ＯＵＴ線を引いてみます。
　　　　　
ＯＵＴ線を引くと
こんな感じになります。

<font style="border-bottom-style:outset;border-color:lime;line-height:40px;">


　　　●ＩＮ線を引いてみます。
　　　　　　　　　　
ＩＮ線を引くと
こんな感じになります。

<font style="border-bottom-style:inset;border-color:lime;line-height:40px;">

＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊
　
☆・・・違いがわかりますか？･･･☆

color:線の色;
line-height:行の高さpx;

　　　線の色や（色は色番号・色の名前のどちらでもOKです。）
　　　行の高さを変更する場合は、緑の文字の所を直してください。

　　　ＯＵＴ線とＩＮ線の違いは良くわからないようなので、比較
　　　しやすいように、下に書いてみました。




　　　　◆ 背景を黒にして、同じ色を使って比較してみました。◆


　　　●　ＯＵＴ線　
　　　　　
ＯＵＴ線を引くと
こんな感じになります。


　　　●　ＩＮ線　
　　　　　
ＩＮ線を引くと
こんな感じになります。

　　

© Rakuten Group, Inc.